<template>
  <div class="app-container">
    <!-- 搜索 -->

    <!-- 表格 -->
    <PageContent ref="contentRef" :content-config="contentConfig" @addClick="handleAddClick"
      @edit-click="handleEditClick" @export-click="handleExportClick" 
     >
      <template #mode="scope">
        <!-- warning -->
        <el-tag>
          {{ $t(`status.${scope.row.mode}`) }}
        </el-tag>
      </template>
      <template #status="scope">
        <!-- warning -->
        <el-tag :type="types[scope.row.status]">
          {{ $t(`groupStatus.${scope.row.status}`) }}
        </el-tag>
      </template>
      <template #conversations="scope">
        <template v-for="item in scope.row.conversations">
          <el-tag>
            {{ item.name }}
          </el-tag>
        </template>
        <!-- warning -->

      </template>
    </PageContent>

    <formModal ref="formModalRef" @refresh-table="handleQuery" />
  </div>
</template>

<script setup>
import contentConfig from "./config/content";
import usePage from "@/hooks/usePage";
import formModal from './form-modal/index.vue'
defineOptions({
  name: "serverGroup",
  inheritAttrs: false,
});
const { t } = useI18n();
const { contentRef, 
  handleSubmitClick, handleExportClick, } = usePage();

const formModalRef = ref(null)

const handleQuery = () => {
  handleSubmitClick()
}

const handleEditClick = (row) => {
  if(formModalRef.value){
    formModalRef.value.initModal({ row, type: 1 });
  }
}
const handleAddClick = (row) => {
  if(formModalRef.value){
    formModalRef.value.initModal({ row, type: 0 });
  }
}



const types = {
  "active": "success",
  "inactive": "info"
}



</script>

<style></style>